<template>
  <li class="item" :class="{current: currentMusic.id === data.id}" @click="select">
    <transition name="fade">
      <icon-svg v-if="currentMusic.id === data.id" class="playing" icon-class="yinfu01"/>
    </transition>
    <span class="name" v-text="formatName" />
    <span class="duration" v-text="formatDuration" />
    <span class="favorite" @click.stop="handleLike">
      <icon-svg :icon-class="checkFavorite ? 'xihuan' : 'buxihuan'" />
    </span>
    <span class="delete" @click.stop="Delete">
      <icon-svg icon-class="delete"/>
    </span>
  </li>
</template>

<script>
import { FormatInterval } from 'common/js/utils'

export default {
  name: 'item',
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  methods: {
    select () {
      if (this.currentMusic.id === this.data.id) return
      this.$store.dispatch('player/setCurrentMusic', this.data)
    },
    handleLike () {
      const type = this.checkFavorite ? 'user/delFavoriteSongIds' : 'user/addFavoriteSongIds'
      this.$store.dispatch(type, this.data.id)
    },
    Delete () {
      this.$store.dispatch('player/delOneSong', this.data)
    }
  },
  computed: {
    currentMusic () {
      return this.$store.state.player.currentMusic
    },
    formatName () {
      return `${this.data.name} - ${this.data.singer.map(item => item.name).join('/')}`
    },
    formatDuration () {
      return FormatInterval(this.data.duration) || null
    },
    checkFavorite () {
      return this.$store.state.user.favoriteSongIds.includes(this.data.id)
    }
  }
}
</script>

<style scoped lang="less">
@import "~common/style/variable.less";
@import "~common/style/mixins.less";

  .item {
    padding: 0 20px 0 38px;
    height: 40px;
    display: flex;
    align-items: center;
    text-align: left;
    color: @color-text-d;
    font-size: @font-size-medium;

    width: calc(100% - 58px);
    transition: all 1s;
    .playing {
      padding: 0 3.5px;
      position: absolute;
      left: 8.5px;
      color: @color-theme;
    }

    .name { .no-wrap-flex() }
    .duration {
      padding: 0 12px;
      color: @color-text;
    }
    .favorite, .delete { padding: 12px 10px }
    .duration, .favorite { color: @color-text }
  }
  .item.current {
    color: @color-text;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }

</style>
